<template>
  <div class="message">
    <div class="i-layout-page-header">
      <span class="ivu-page-header-title">{{ $route.meta.title }}</span>
    </div>
    <div class="table-box" style="padding-bottom: 0;padding-top: 20px;">
      <Card :bordered="false" dis-hover class="">
		  <Row type="flex">
		    <Col span="24">
				<span style="padding: 0px 0px 0px 0px;display: block">宠物名称：{{$route.params.name}}</span>
		    </Col>
		  </Row>
      </Card>
    </div>
    
    <!-- 缩略图配置 -->
    <div class="table-box">
      <Card :bordered="false" dis-hover class="ivu-mt">
        <Row type="flex" class="mb20">
		  <Col span="24">
			<span style="padding: 0px 0px 20px 0px;display: block">喂食记录</span>
		  </Col>
        </Row>
        <Table
          :columns="columns1"
          :data="feedLists"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
          <template slot-scope="{ row, index }" slot="status">
            <!-- {{row}}{{index}} -->
            <i-switch
              v-model="row.status"
              :value="row.status"
              :true-value="1"
              :false-value="0"
              @on-change="changeSwitch(row, index)"
              size="large"
            >
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
            </i-switch>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <span v-auth="['admin-contract-foud-modify']" class="btn" @click="editFoud(row)">编辑</span>
            <Divider v-auth="['admin-contract-foud-modify']" type="vertical" />
            <span v-auth="['admin-contract-foud-del']" class="btn" @click="del(row, '删除该数据', index)">删除</span>
          </template>
        </Table>
		<div class="acea-row row-right page">
		  <Page
		    :total="page.total"
		    :current="page.pageNum"
		    show-elevator
		    show-total
		    @on-change="pageChange"
		    :page-size="page.pageSize"
		    @on-page-size-change="limitChange"
		  />
		</div>
      </Card>
	  
	  <Card :bordered="false" dis-hover class="ivu-mt">
	    <Row type="flex" class="mb20">
		  <Col span="24">
			<span style="padding: 0px 0px 20px 0px;display: block">饮水记录</span>
		  </Col>
	    </Row>
	    <Table
	      :columns="columns2"
	      :data="waterLists"
	      ref="table"
	      class="mt25"
	      :loading="loading_water"
	      highlight-row
	      no-userFrom-text="暂无数据"
	      no-filtered-userFrom-text="暂无筛选结果"
	    >
	      <template slot-scope="{ row, index }" slot="status">
	        <!-- {{row}}{{index}} -->
	        <i-switch
	          v-model="row.status"
	          :value="row.status"
	          :true-value="1"
	          :false-value="0"
	          @on-change="changeSwitch(row, index)"
	          size="large"
	        >
	          <span slot="open">开启</span>
	          <span slot="close">关闭</span>
	        </i-switch>
	      </template>
	      <template slot-scope="{ row, index }" slot="action2">
	        <span v-auth="['admin-contract-ticket-modify']" class="btn" @click="editTicket(row)">编辑</span>
	        <Divider v-auth="['admin-contract-foud-modify']" type="vertical" />
	        <span v-auth="['admin-contract-ticket-del']" class="btn" @click="delTicket(row, '删除该数据', index)">删除</span>
	      </template>
	    </Table>
		<div class="acea-row row-right page">
		  <Page
		    :total="page2.total"
		    :current="page2.pageNum"
		    show-elevator
		    show-total
		    @on-change="pageChange2"
		    :page-size="page2.pageSize"
		    @on-page-size-change="limitChange2"
		  />
		</div>
	  </Card><!--饮水记录-->
	  <Card :bordered="false" dis-hover class="ivu-mt">
	    <Row type="flex" class="mb20">
		  <Col span="24">
			<span style="padding: 0px 0px 20px 0px;display: block">疫苗记录</span>
		  </Col>
	    </Row>
	    <Table
	      :columns="columns3"
	      :data="vaccLists"
	      ref="table"
	      class="mt25"
	      :loading="loading_vacc"
	      highlight-row
	      no-userFrom-text="暂无数据"
	      no-filtered-userFrom-text="暂无筛选结果"
	    >
	      <template slot-scope="{ row, index }" slot="status">
	        <!-- {{row}}{{index}} -->
	        <i-switch
	          v-model="row.status"
	          :value="row.status"
	          :true-value="1"
	          :false-value="0"
	          @on-change="changeSwitch(row, index)"
	          size="large"
	        >
	          <span slot="open">开启</span>
	          <span slot="close">关闭</span>
	        </i-switch>
	      </template>
	      <template slot-scope="{ row, index }" slot="action2">
	        <span v-auth="['admin-contract-ticket-modify']" class="btn" @click="editTicket(row)">编辑</span>
	        <Divider v-auth="['admin-contract-foud-modify']" type="vertical" />
	        <span v-auth="['admin-contract-ticket-del']" class="btn" @click="delTicket(row, '删除该数据', index)">删除</span>
	      </template>
	    </Table>
		<div class="acea-row row-right page">
		  <Page
		    :total="page3.total"
		    :current="page3.pageNum"
		    show-elevator
		    show-total
		    @on-change="pageChange3"
		    :page-size="page3.pageSize"
		    @on-page-size-change="limitChange3"
		  />
		</div>
	  </Card><!--疫苗记录-->
	  <Card :bordered="false" dis-hover class="ivu-mt">
	    <Row type="flex" class="mb20">
		  <Col span="24">
			<span style="padding: 0px 0px 20px 0px;display: block">铲砂记录</span>
		  </Col>
	    </Row>
	    <Table
	      :columns="columns4"
	      :data="sandLists"
	      ref="table"
	      class="mt25"
	      :loading="loading_sand"
	      highlight-row
	      no-userFrom-text="暂无数据"
	      no-filtered-userFrom-text="暂无筛选结果"
	    >
	      <template slot-scope="{ row, index }" slot="status">
	        <!-- {{row}}{{index}} -->
	        <i-switch
	          v-model="row.status"
	          :value="row.status"
	          :true-value="1"
	          :false-value="0"
	          @on-change="changeSwitch(row, index)"
	          size="large"
	        >
	          <span slot="open">开启</span>
	          <span slot="close">关闭</span>
	        </i-switch>
	      </template>
		  
		  <template slot-scope="{ row, index }" slot="is_diff">
		    <span v-if="row.is_diff == 0">否</span>
		    <span v-else>是</span>
		  </template>
		  
	      <template slot-scope="{ row, index }" slot="action2">
	        <span v-auth="['admin-contract-ticket-modify']" class="btn" @click="editTicket(row)">编辑</span>
	        <Divider v-auth="['admin-contract-foud-modify']" type="vertical" />
	        <span v-auth="['admin-contract-ticket-del']" class="btn" @click="delTicket(row, '删除该数据', index)">删除</span>
	      </template>
	    </Table>
		<div class="acea-row row-right page">
		  <Page
		    :total="page4.total"
		    :current="page4.pageNum"
		    show-elevator
		    show-total
		    @on-change="pageChange4"
		    :page-size="page4.pageSize"
		    @on-page-size-change="limitChange4"
		  />
		</div>
	  </Card><!--饮水记录-->
	  <Card :bordered="false" dis-hover class="ivu-mt">
	    <Row type="flex" class="mb20">
	  		  <Col span="24">
	  			<span style="padding: 0px 0px 20px 0px;display: block">驱虫记录</span>
	  		  </Col>
	    </Row>
	    <Table
	      :columns="columns5"
	      :data="insectLists"
	      ref="table"
	      class="mt25"
	      :loading="loading_insect"
	      highlight-row
	      no-userFrom-text="暂无数据"
	      no-filtered-userFrom-text="暂无筛选结果"
	    >
	      <template slot-scope="{ row, index }" slot="status">
	        <!-- {{row}}{{index}} -->
	        <i-switch
	          v-model="row.status"
	          :value="row.status"
	          :true-value="1"
	          :false-value="0"
	          @on-change="changeSwitch(row, index)"
	          size="large"
	        >
	          <span slot="open">开启</span>
	          <span slot="close">关闭</span>
	        </i-switch>
	      </template>
	      <template slot-scope="{ row, index }" slot="action2">
	        <span v-auth="['admin-contract-ticket-modify']" class="btn" @click="editTicket(row)">编辑</span>
	        <Divider v-auth="['admin-contract-foud-modify']" type="vertical" />
	        <span v-auth="['admin-contract-ticket-del']" class="btn" @click="delTicket(row, '删除该数据', index)">删除</span>
	      </template>
	    </Table>
		<div class="acea-row row-right page">
		  <Page
		    :total="page5.total"
		    :current="page5.pageNum"
		    show-elevator
		    show-total
		    @on-change="pageChange5"
		    :page-size="page5.pageSize"
		    @on-page-size-change="limitChange5"
		  />
		</div>
	  </Card><!--饮水记录-->
    </div>
  </div>
</template>

<script>
	
import { 
	ListWaterApi,
	ListSandApi,
	ListInsectApi,
	ListFeedApi,
	ListVaccApi,
	} from '@/api/archives_records';
export default {
  components: { },
  data() {
    return {
      saveType: 0,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
	  
	  grid: {
	    xl: 8,
	    lg: 8,
	    md: 8,
	    sm: 24,
	    xs: 24,
	  },
      boxs: [
        { content: '左上', id: 1 },
        { content: '上', id: 2 },
        { content: '右上', id: 3 },
        { content: '左中', id: 4 },
        { content: '中', id: 5 },
        { content: '右中', id: 6 },
        { content: '左下', id: 7 },
        { content: '下', id: 8 },
        { content: '右下', id: 9 },
      ],
	  contractData: '',
      columns1: [
        {
          title: '喂食时间',
          key: 'created_time',
          align: 'center',
          minWidth: 80,
        },
        {
          title: '喂食名称',
          key: 'name',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '数量（g）',
          key: 'num',
          align: 'center',
          minWidth: 100,
        },
		{
		  title: '服务日期',
		  key: 'service_date',
		  align: 'center',
		  minWidth: 100,
		},
		{
		  title: '下次执行日期',
		  key: 'next_date',
		  align: 'center',
		  minWidth: 100,
		}
      ],
	  columns2: [
	      {
	        title: '饮水时间',
	        key: 'created_time',
	        align: 'center',
	        minWidth: 80,
	      },
	      {
	        title: '饮水量（ml）',
	        key: 'num',
	        align: 'center',
	        minWidth: 100,
	      },
		  {
		    title: '服务日期',
		    key: 'service_date',
		    align: 'center',
		    minWidth: 100,
		  },
		  {
		    title: '下次执行日期',
		    key: 'next_date',
		    align: 'center',
		    minWidth: 100,
		  }
	  ],
	  columns3: [
	      {
	        title: '疫苗类型',
	        key: 'type_id_name',
	        align: 'center',
	        minWidth: 80,
	      },
	      {
	        title: '使用药品',
	        key: 'name',
	        align: 'center',
	        minWidth: 100,
	      },
	      {
	        title: '服务日期',
	        key: 'service_date',
	        align: 'center',
	        minWidth: 100,
	      },
	      {
	        title: '下次执行日期',
	        key: 'next_date',
	        align: 'center',
	        minWidth: 100,
	      }
	  ],
	  columns4: [
	      {
	        title: '铲砂类型',
	        key: 'type_id_name',
	        align: 'center',
	        minWidth: 80,
	      },
	      {
	        title: '是否异常',
	        slot: 'is_diff',
	        align: 'center',
	        minWidth: 100,
	      },
	      {
	        title: '服务日期',
	        key: 'service_date',
	        align: 'center',
	        minWidth: 100,
	      },
	      {
	        title: '下次执行日期',
	        key: 'next_date',
	        align: 'center',
	        minWidth: 100,
	      }
	  ],
	  columns5: [
		  {
			title: '驱虫类型',
			key: 'type_id_name',
			align: 'center',
			minWidth: 80,
		  },
		  {
			title: '使用药品',
			key: 'name',
			align: 'center',
			minWidth: 100,
		  },
		  {
			title: '服务日期',
			key: 'service_date',
			align: 'center',
			minWidth: 100,
		  },
		  {
			title: '下次执行日期',
			key: 'next_date',
			align: 'center',
			minWidth: 100,
		  }
	  ],
      total: 0,
      page: {
        total: 0, // 总条数
        pageNum: 1, // 当前页
        pageSize: 10, // 每页显示条数
      },
	  //饮水
	  page2: {
	    total: 0, // 总条数
	    pageNum: 1, // 当前页
	    pageSize: 10, // 每页显示条数
	  },
	  //疫苗
	  page3: {
	    total: 0, // 总条数
	    pageNum: 1, // 当前页
	    pageSize: 10, // 每页显示条数
	  },
	  //铲砂
	  page4: {
	    total: 0, // 总条数
	    pageNum: 1, // 当前页
	    pageSize: 10, // 每页显示条数
	  },
	  //驱虫
	  page5: {
	    total: 0, // 总条数
	    pageNum: 1, // 当前页
	    pageSize: 10, // 每页显示条数
	  },
	  feedLists:[],//喂食记录
	  waterLists:[],//饮水记录
	  insectLists:[],//驱虫记录
	  sandLists:[],//铲砂记录
	  vaccLists:[],//疫苗记录
	  loading:false,
	  loading_water:false,
	  loading_insect:false,
	  loading_sand:false,
	  loading_vacc:false,
    };
  },
  created() {
    // storageConfigApi().then((res) => {
    //   if (res.data.type == 1) {
    //     this.localStorage = true;
    //   }
    //   this.formValidate.upload_type = res.data.type;
    //   this.changeTab(res.data.type.toString());
    // });
  },
  mounted: function () {
	  
	this.getFeedData();
	this.getWaterData();
	this.getVaccData();
	this.getSandData();
	this.getInsectData();
  },
  methods: {
	  //获取喂食记录列表
	getFeedData() {
		this.loading = true;
		ListFeedApi({
		  page: this.page.pageNum,
		  limit: this.page.pageSize,
		  id:this.$route.params.id
		})
		  .then(async (res) => {
		    let data = res.data;
			this.feedLists = data.list;
			this.page.total = data.count;
		    this.loading = false;
		  })
		  .catch((res) => {
		    this.loading = false;
		    this.$Message.error(res.msg);
		  });
	},
	//获取饮水记录列表
	getWaterData() {
		this.loading_water = true;
		ListWaterApi({
		  page: this.page2.pageNum,
		  limit: this.page2.pageSize,
		  id:this.$route.params.id
		})
		  .then(async (res) => {
		    let data = res.data;
			this.waterLists = data.list;
			this.page2.total = data.count;
		    this.loading_water = false;
		  })
		  .catch((res) => {
		    this.loading_water = false;
		    this.$Message.error(res.msg);
		  });
	},
	//获取疫苗记录列表
	getVaccData() {
		this.loading_vacc = true;
		ListVaccApi({
		  page: this.page3.pageNum,
		  limit: this.page3.pageSize,
		  id:this.$route.params.id
		})
		  .then(async (res) => {
		    let data = res.data;
			this.vaccLists = data.list;
			this.page3.total = data.count;
		    this.loading_vacc = false;
		  })
		  .catch((res) => {
		    this.loading_vacc = false;
		    this.$Message.error(res.msg);
		  });
	},
	//获取铲砂记录列表
	getSandData() {
		this.loading_sand = true;
		ListSandApi({
		  page: this.page4.pageNum,
		  limit: this.page4.pageSize,
		  id:this.$route.params.id
		})
		  .then(async (res) => {
		    let data = res.data;
			this.sandLists = data.list;
			this.page4.total = data.count;
		    this.loading_sand = false;
		  })
		  .catch((res) => {
		    this.loading_sand = false;
		    this.$Message.error(res.msg);
		  });
	},
	//获取驱虫记录列表
	getInsectData() {
		this.loading_insect = true;
		ListInsectApi({
		  page: this.page5.pageNum,
		  limit: this.page5.pageSize,
		  id:this.$route.params.id
		})
		  .then(async (res) => {
		    let data = res.data;
			this.insectLists = data.list;
			this.page5.total = data.count;
		    this.loading_insect = false;
		  })
		  .catch((res) => {
		    this.loading_insect = false;
		    this.$Message.error(res.msg);
		  });
	},
	
	pageChange(index) {
	  this.page.pageNum = index;
	  this.getFeedData();
	},
	limitChange(limit) {
	  this.page.pageSize = limit;
	  this.getFeedData();
	},
	pageChange2(index) {
	  this.page2.pageNum = index;
	  this.getWaterData();
	},
	limitChange2(limit) {
	  this.page2.pageSize = limit;
	  this.getWaterData();
	},
	pageChange3(index) {
	  this.page3.pageNum = index;
	  this.getVaccData();
	},
	limitChange3(limit) {
	  this.page3.pageSize = limit;
	  this.getVaccData();
	},
	pageChange4(index) {
	  this.page4.pageNum = index;
	  this.getSandData();
	},
	limitChange4(limit) {
	  this.page4.pageSize = limit;
	  this.getSandData();
	},
	pageChange5(index) {
	  this.page5.pageNum = index;
	  this.getInsectData();
	},
	limitChange5(limit) {
	  this.page5.pageSize = limit;
	  this.getInsectData();
	},
	
  },
};
</script>
<style scoped lang="less">
.ivu-input-group > .ivu-input:last-child,
/deep/.ivu-input-group-append {
  background: none;
  color: #999999;
}
</style>
